<template>
  <div>
    <el-drawer v-model="props.showDrawer" class="jzt-drawer" :with-header="false" size="70%" :before-close="handelbeforeClose">
      <div class="content">
        <div class="header">
          <span>SKU</span>
          <el-icon size="20" @click="handelbeforeClose"><CloseBold /></el-icon>
        </div>
        <div class="top">
          <el-row :gutter="22">
            <el-col :span="3">
              <div class="pictere">
                <img :src="details.mainPicUrl" />
              </div>
            </el-col>
            <el-col :span="19">
              <div class="sp_title">{{ details.productName }}</div>
              <div class="sp_pic">
                <span>正价</span>
                <span class="price">￥999.00</span>
              </div>
              <div class="sp_ms">
                <el-row :gutter="20">
                  <el-col :span="5"
                    ><div class="grid-content ep-bg-purple">上市时间：{{ details.appearTime }}</div></el-col
                  >
                  <el-col :span="3"
                    ><div class="grid-content ep-bg-purple">已售：{{ details.businessShowSaleNum }}</div></el-col
                  >
                  <el-col :span="5"
                    ><div class="grid-content ep-bg-purple">商品ID：{{ details.productId }}</div></el-col
                  >
                  <el-col :span="3"
                    ><div class="grid-content ep-bg-purple">商品等级：{{ details.businessGrade }}</div></el-col
                  >
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="speed"></div>
        <div class="botton">
          <div class="commodity">
            <span>商品附加消息</span>
            <div>赠送套餐“杯子、沙发遮布、床头柜”随机发货2样</div>
          </div>
          <div class="specifications">
            <span>规格</span>
            <el-row :gutter="20">
              <el-col :span="3" v-for="(item, index) in data.gugList" :key="index"
                ><div class="child" :class="data.num == index ? 'active' : ''" @click="handelClickItem(item, index)">
                  {{ item.name }}
                </div></el-col
              >
            </el-row>
          </div>
          <div class="colour">
            <span>颜色</span>
            <el-row :gutter="20">
              <el-col :span="2" v-for="(item, index) in data.gugList" :key="index"
                ><div class="child" :class="data.num == index ? 'active' : ''" @click="handelClickItem(item, index)">
                  <img :src="imgs" alt="" />
                  <div>{{ item.name }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="specifications">
            <span>规格</span>
            <el-row :gutter="20">
              <el-col :span="3" v-for="(item, index) in data.gugList" :key="index"
                ><div class="child" :class="data.num == index ? 'active' : ''" @click="handelClickItem(item, index)">
                  {{ item.name }}
                </div></el-col
              >
            </el-row>
          </div>
        </div>
        <div class="btn">
          <el-button @click="handelbeforeClose">取消</el-button>
          <el-button type="primary" @click="handelClickItem">确认</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import { defineProps, defineEmits, reactive, onMounted, watch, ref } from "vue";
import { CloseBold } from "@element-plus/icons-vue";
import imgs from "@/static/images/check.png";
// api
import { queryProductDetial } from "@/apis/createFile/index.js";
const emits = defineEmits("close");
const props = defineProps({
  showDrawer: { type: Boolean, default: false },
  productId: {
    type: String,
    required: ""
  }
});
const data = reactive({
  num: 0,
  gugList: [
    { name: "科技布(布艺类)" },
    { name: "科技布(布艺类)" },
    { name: "科技布(布艺类)" },
    { name: "科技布(布艺类)" },
    { name: "科技布(布艺类)" },
    { name: "科技布(布艺类)" },
    { name: "科技布(布艺类)" },
    { name: "科技布(布艺类)" },
    { name: "科技布(布艺类)" },
    { name: "科技布(布艺类)" },
    { name: "科技布(布艺类)" }
  ]
});
const details = ref({});
const handelbeforeClose = () => {
  emits("close");
};
const handelClickItem = (item, index) => {
  data.num = index;
};
// 获取详情
const getDetail = () => {
  let postData = new FormData();
  postData.append("productId", props.productId);
  queryProductDetial(postData).then(res => {
    console.log(res);
    if (res.code == 200) {
      details.value = res.data;
    }
  });
};
// 生命周期
onMounted(() => {
  getDetail();
});
watch(
  () => props.showDrawer,
  () => {
    getDetail();
  },
  { deep: true }
);
</script>
<style scoped lang="scss">
.active {
  border: 2px solid #007dff !important;
  color: #007dff !important;
}
.header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  span {
    position: relative;
    margin-left: 20px;
    font-family:
      HarmonyOS Sans SC,
      HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 18px;
    color: #131414;
    line-height: 24px;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  span::before {
    content: "";
    width: 6px;
    height: 6px;
    position: absolute;
    background-color: #409eff;
    left: -10px;
    top: 8px;
    border-radius: 50%;
  }
}
.pictere {
  width: 150px;
  height: 150px;
  img {
    width: 100%;
    height: 100%;
  }
}
.sp_title {
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #3d3d3d;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 20px;
}
.sp_pic {
  display: flex;
  align-items: center;
  span:nth-child(1) {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid #ff8928;
    box-sizing: border-box;
    color: #ff8928;
    margin-right: 20px;
  }
  span:nth-child(2) {
    font-family:
      Source Han Sans,
      Source Han Sans;
    font-weight: 700;
    font-size: 24px;
    color: #ff3333;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
.sp_ms {
  margin-top: 33px;
  color: #86909c;
  font-size: 12px;
}
.speed {
  background: #eef1f4;
  height: 10px;
}
.botton {
  .commodity {
    span {
      font-family:
        Source Han Sans,
        Source Han Sans;
      font-weight: 500;
      font-size: 18px;
      color: #86909c;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin: 20px 0 10px 0px;
      display: inline-block;
    }
    div {
      height: 44px;
      background: #f5f7fa;
      border-radius: 0px 0px 0px 0px;
      font-size: 14px;
      color: #3d3d3d;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      display: flex;
      align-items: center;
      padding-left: 20px;
    }
  }
  .specifications {
    span {
      font-size: 18px;
      color: #86909c;
      display: inline-block;
      margin: 20px 0 10px 0px;
    }
    .child {
      padding: 8px 25px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      grid: 20px;
      margin-bottom: 20px;
      cursor: pointer;
      border-radius: 3px;
    }
  }
}
.colour {
  span {
    font-size: 18px;
    color: #86909c;
    display: inline-block;
    margin: 20px 0 10px 0px;
  }
  .child {
    height: 106px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    grid: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
    div {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 32px;
      background: linear-gradient(180deg, rgba(26, 26, 26, 0.16) 0%, #1a1a1a 100%);
      border-radius: 0px 0px 0px 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
  }
}
.content {
  height: 100%;
  position: relative;
  .btn {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    button {
      width: 92px;
      height: 36px;
    }
  }
}
</style>
